<template>
	<view>
		<view class="" v-if="!list.length">
			您尚未发布任何商品
		</view>
		<uni-swipe-action v-else>
			<uni-swipe-action-item @click="onClick($event,item.goodsId)" v-for="(item,index) in list" :right-options="options"
				:key="item.goodsId">
				<view class="goods">
					<image mode="aspectFill" class="picture" :src="item.goodsImage"></image>
					<view class="meta">
						<view class="name ellipsis">{{ item.goodsName }}</view>
						<view class="attrsText ellipsis">{{ item.goodsArticle }}</view>
						<view class="price">{{ item.goodsPrice }}</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>


		<!-- 添加商品按钮 -->
		<view class="add-btn">
			<navigator hover-class="none" url="/pages/merchant/merchant-goods/good_add/good_add">
				添加商品
			</navigator>
		</view>

		<!-- 自定义导航栏 -->
		<u-tabbar :value="value" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item text="论坛" icon="home" @click="toIndex"></u-tabbar-item>
			<u-tabbar-item text="商品" icon="bag" @click="toGoods"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="toMy"></u-tabbar-item>
		</u-tabbar>
	</view>

</template>

<script>
	import store from "@/store/index.js";
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from "vuex";
	export default {
		onShow() {
			// 页面显示时执行的代码
			this.get_list(this.user.userId)
		},
		data() {
			return {
				list: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				value: 1,

			}
		},
		methods: {
			toMy() {
				uni.reLaunch({
					url: '/pages/merchant/merchant_about/merchant_about'
				})
			},
			onClick(e, index) {
				console.log(e, index)
				uni.showModal({
					content: '是否删除',
					confirmColor: '#27BA9B',
					success: (res) => {
						console.log(res)
						//点击确定
						if (res.confirm) {
							// 后端删除单品
							uni.request({
								url: 'http://localhost:3000/users/merchant/goods/delete',
								method: 'post',
								data: {
									goodsId: index,
								},
								success: (res) => {
									// 重新获取列表
									this.get_list(this.user.userId)
									console.log("res:", res)
								},
							});
						}
					},
				})
			},
			toIndex() {
				uni.reLaunch({
					url: '/pages/merchant/index'
				})
			},
			// 获取列表
			get_list(id) {
				uni.request({
					url: 'http://localhost:3000/users/merchant/goods',
					method: 'get',
					data: {
						userId: id,
					},
					success: (res) => {
						this.list = res.data
						console.log("res:", res)
					},
				});
			}

		},
		computed: {
			...mapState('user', ['user']),
		},
		created() {}
	}
</script>

<style scoped lang="scss">
	// 购物车商品
	.goods {
		display: flex;
		padding: 20rpx 20rpx 20rpx 80rpx;
		border-radius: 10rpx;
		background-color: #fff;
		position: relative;

		.navigator {
			display: flex;
		}

		.checkbox {
			position: absolute;
			top: 0;
			left: 0;

			display: flex;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 100%;

			// &::before {
			//   content: '\e6cd';
			//   font-family: 'erabbit' !important;
			//   font-size: 40rpx;
			//   color: #444;
			// }

			// &.checked::before {
			//   content: '\e6cc';
			//   color: #27ba9b;
			// }
		}

		.picture {
			width: 170rpx;
			height: 170rpx;
		}

		.meta {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
		}

		.name {
			height: 72rpx;
			font-size: 26rpx;
			color: #444;
		}

		.attrsText {
			line-height: 1.8;
			padding: 0 15rpx;
			font-size: 24rpx;
			align-self: flex-start;
			border-radius: 4rpx;
			color: #888;
			background-color: #f7f7f8;
		}

		.price {
			line-height: 1;
			font-size: 26rpx;
			color: #444;
			margin-bottom: 2rpx;
			color: #cf4444;

			&::before {
				content: '￥';
				font-size: 80%;
			}
		}

		// 商品数量
		.count {
			position: absolute;
			bottom: 20rpx;
			right: 5rpx;

			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 220rpx;
			height: 48rpx;

			.text {
				height: 100%;
				padding: 0 20rpx;
				font-size: 32rpx;
				color: #444;
			}

			.input {
				height: 100%;
				text-align: center;
				border-radius: 4rpx;
				font-size: 24rpx;
				color: #444;
				background-color: #f6f6f6;
			}
		}
	}

	.add-btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom) + 100rpx);
		z-index: 1;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
</style>